<nz-spin [nzSpinning]="loading">
  <h4 class="card__title mb-md">
    {{title}}
    <range-picker nzAllowClear="false" [nzFormat]="'YYYY-MM-DD'" [(ngModel)]="i.start" [(ngModelEnd)]="i.end"
      [shortcut]="true" (nzOnOpenChange)="onDateChange($event)"></range-picker>
    <div></div>
  </h4>
  <nz-empty *ngIf="noData && !loading"></nz-empty>
  <nz-skeleton *ngIf="loading"></nz-skeleton>
  <div nz-row nzGutter="16">
    <div nz-col nzSpan="16">
      <div #ec echarts [hidden]="noData" style="width: 700px;height:500px;"></div>
    </div>
    <div nz-col [hidden]="noData" nzSpan="8">
      <div class="rank">
        <h4 class="ranking-title">销售TOP10排名</h4>
        <ul class="rank-list">
          <li *ngFor="let i of data.sort() | rankfilter:10; let idx = index">
            <span class="number" [ngClass]="{ active: idx < 3 }">{{ idx + 1 }}</span>
            <span class="title">{{i.name}}</span>
            <span class="value">{{ i.value | number }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div nz-row class="mt-md">
    <div nz-col nzSpan="24">
      <div class="bar">
        <g2-bar *ngIf="!noData2" height="200" style="width: 100%" [title]="'销售趋势'" [data]="trend"></g2-bar>
      </div>
    </div>
  </div>

  <div class="card__time" [ngStyle]="{ visibility: time ? 'visible' : 'hidden' }">更新于: {{ time | _date }}</div>
</nz-spin>
